<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天天购物 - 订单结算</title>
    <link rel="stylesheet" href="结账.css">
</head>
<body>
    <div class="checkout-header">
        <a href="index.html"back-link">← 返回继续购物</a>
        <h1>订单结算</h1>
    </div>

    <main class="checkout-container">
        <!-- 订单摘要 -->
        <section class="order-summary">
            <h2>订单商品</h2>
            <div id="order-items"></div>
            <div class="order-total">
                总计：¥<span id="order-total">0.00</span>
            </div>
        </section>

        <!-- 收货信息表单 -->
        <form class="checkout-form" id="checkoutForm">
            <h2>收货信息</h2>
            <div class="form-group">
                <label>收件人姓名</label>
                <input type="text" id="name" required>
            </div>
            
            <div class="form-group">
                <label>联系电话</label>
                <input type="tel" id="phone" pattern="[0-9]{11}" required>
            </div>

            <div class="form-group">
                <label>详细地址</label>
                <textarea id="address" rows="3" required></textarea>
            </div>

            <h2>支付方式</h2>
            <div class="payment-methods">
                <label class="payment-method">
                    <input type="radio" name="payment" value="alipay" checked>
                    <img src="alipay.png" alt="支付宝">
                    <span>支付宝</span>
                </label>
                
                <label class="payment-method">
                    <input type="radio" name="payment" value="wechat">
                    <img src="wechatpay.png" alt="微信支付">
                    <span>微信支付</span>
                </label>
            </div>

            <button type="submit" class="submit-btn">立即支付</button>
        </form>
    </main>

    <script>
        // 加载订单数据
        function loadCheckoutData() {
            const checkoutData = JSON.parse(localStorage.getItem('checkoutCart'));
            
          /*  if(!checkoutData || checkoutData.items.length === 0) {
                document.body.innerHTML = `
                    <div class="empty-cart">
                        <h2>购物车为空</h2>
                        <a href="index.html">返回商城</a>
                    </div>
                `;
                return;
            }*/

            // 渲染订单商品
            document.getElementById('order-items').innerHTML = checkoutData.items
                .map(item => `
                    <div class="order-item">
                        <span>${item.name} × ${item.quantity}</span>
                        <span>¥${(item.price * item.quantity).toFixed(2)}</span>
                    </div>
                `).join('');

            document.getElementById('order-total').textContent = 
                checkoutData.total.toFixed(2);
        }

        // 提交订单
        document.getElementById('checkoutForm').addEventListener('submit', function(e) {
            e.preventDefault();

            // 收集表单数据
            const orderData = {
                customer: {
                    name: document.getElementById('name').value,
                    phone: document.getElementById('phone').value,
                    address: document.getElementById('address').value
                },
                payment: document.querySelector('input[name="payment"]:checked').value,
                ...JSON.parse(localStorage.getItem('checkoutCart'))
            };

            // 清空本地购物车
            localStorage.removeItem('cart');
            localStorage.removeItem('checkoutCart');

            // 模拟API提交
            console.log('订单提交:', orderData);
            
            // 跳转到成功页（实际开发中需要创建success.html）
            alert(`支付成功！订单金额：¥${orderData.total.toFixed(2)}`);
            window.location.href = 'index.html';
        });

        // 初始化页面
        loadCheckoutData();
    </script>
</body>
</html>
